<template>
	<view>
		<!-- 轮播图 -->
		<swiper-banner :swipers="goodsBanner" :height="890" :bool="true"></swiper-banner>
		<!-- 基本内容 -->
		<base-info :detail="detail" :checkedGoodsPrice="checkedGoodsPrice"></base-info>
		<!-- 滚动属性 -->
		<scroll-attrs :attrs="detail.goodsAttrs"></scroll-attrs>
		<!-- 选择弹窗 -->
		<view class="pop">
			<view class="popup d-flex a-center">
				<view class="list">
					<view class="choosed my-1" @click="open('attr')">
						<text>已选:</text>
						<text>{{checkedGoods}}</text>
					</view>
					<view class="run my-2" @click="open('attr2')">
						<text>配送:</text>
						<text>北京 东城区 现配</text>
					</view>
					<view class="d-flex a-center  my-1" @click="open('attr3')">
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							小米自营
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							小米发货
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-xianshi_xuanze main-text-color"></view>
							七天无理由退货
						</view>
					</view>
				</view>
			</view>
		</view>
		<uv-parse :content="content"></uv-parse>
		<uni-popup ref="popup1" type="bottom" border-radius="10px 10px 0 0" background-color="#fff" @touchmove.stop.prevent="disabledScroll">
			<view class="pop-height">
				<view class="content">
					<view class="body">
						<view class="d-flex a-center poptop">
							<image :src="detail.cover" class="m-2"></image>
							<view>
								<p-price>
									<template #newPrice>
										<text class="pprice">￥<text>{{checkedGoodsPrice}}</text></text>
									</template>
								</p-price>
								<view class="skus my-2">
									{{checkedGoods}}
								</view>
							</view>
						</view>
						<view class="number">
							<!-- <one-adv v-for="(select,index) in selects" :key="index" :title="select.title">
								<color-tag v-for="(item,k) in select.list" :item="item" :key="k"
									:bool="select.selected==k" @click.native="changeIndex(k,index)"></color-tag>
							</one-adv> -->
							<one-adv v-for="(select,index) in selects" :key="index" :title="select.title">
								<color-tag :color="false" v-for="(item,k) in select.list" :key="k" :item="item"
									:bool="select.selected==k" @click="changeColorTag(index,k)"></color-tag>
							</one-adv>
						</view>
						<view class="number d-flex j-sb px-2">
							<text class="tit">
								购买数量:
							</text>
							<uni-number-box :min="1" :max="maxStock" @change="changeNum"></uni-number-box>
						</view>
						<view class="go-cart" v-if="maxStock>0" @click="goCart">
							加入购物车
						</view>
						<view class="go-cart stock-bg-color" v-else>
							暂无库存
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="bottom" border-radius="10px 10px 0 0" background-color="#fff" @touchmove.stop.prevent="disabledScroll">
			<view class="pop-height">
				<view class="content">
					<view class="body">
						<scroll-view scroll-y="true">
							<view>
								<uni-swipe-action ref="unaction">
									<uni-swipe-action-item v-for="(item,index) in store.List" :key="index"
										:right-options="options" @click="onClick(index,$event)" @change="change">
										<view class="swiper-action">
											{{item.name}}-{{item.province}}{{item.city}}{{item.district}}-{{item.address}}
										</view>
									</uni-swipe-action-item>
								</uni-swipe-action>
							</view>
						</scroll-view>
						<view class="go-cart" @click="goAddress">
							添加新地址
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup3" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">底部弹出 333</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getDetail,
		addCart
	} from '../../api/index.js'
	import $U from '../../utils/unLogin.js'
	import {
		useAddressStore
	} from '../../store/address.js'
	const store = useAddressStore()
	var id = '';
	var goodsBanner = ref([])
	var detail = ref([])
	var popup1 = ref()
	var popup2 = ref()
	var popup3 = ref()
	var selects = ref([])
	var unaction = ref()
	var num = ref(0)
	var options = [{
		text: '编辑',
		style: {
			backgroundColor: '#007aff'
		}
	}, {
		text: '删除',
		style: {
			backgroundColor: '#dd524d'
		}
	}]
	// {
	// 		selected: 0,
	// 		title: '颜色',
	// 		list: [{
	// 				name: '黄色'
	// 			},
	// 			{
	// 				name: '绿色'
	// 			}
	// 		]
	// 	},
	// 	{
	// 		selected: 0,
	// 		title: '套餐',
	// 		list: [{
	// 				name: '标配'
	// 			},
	// 			{
	// 				name: '套餐一'
	// 			}
	// 		]
	// 	}
	var content = ref(`<img src="https://i8.mifile.cn/v1/a1/9c3e29dc-151f-75cb-b0a5-c423a5d13926.webp">
								<img src="https://i8.mifile.cn/v1/a1/f442b971-379f-5030-68aa-3b0accb8c2b9.webp">
								<img src="https://i8.mifile.cn/v1/a1/63b700b6-643e-ec18-fdf3-da66b4b4173f.webp">
								<img src="https://i8.mifile.cn/v1/a1/e9dbf276-193e-11c4-99a6-3097fde82350.webp">
								<img src="https://i8.mifile.cn/v1/a1/1249d3ee-2990-a2b4-28d9-f719c2417b1f.webp">
								<img src="https://i8.mifile.cn/v1/a1/97c79915-64b2-808c-53b4-4345652a179f.webp">
								<img src="https://i8.mifile.cn/v1/a1/cd0fbe1e-a1b3-a87a-f4a6-6fb08ec54931.webp">`)

	const open = (arr) => {
		// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
		if (arr == 'attr') {
			popup1.value.open('bottom')
		} else if (arr == 'attr2') {
			popup2.value.open('bottom')
		} else {
			popup3.value.open('bottom')
		}
	}
	const maxStock = computed(() => {
		let index = checkedGoodsIndex.value
		if (index > -1) {
			return detail.value.goodsSkus[index].stock
		} else {
			return detail.value.stock
		}
	})
	//点击number输入框
	const changeNum = (e) => {
		console.log('e', e);
		num.value = e
	}
	//点击切换颜色和套餐
	const changeColorTag = (index, k) => {
		selects.value[index].selected = k
	}
	//计算按钮点击后选中的颜色和套餐
	const checkedGoods = computed(() => {
		let getCheckedGoods = selects.value.map(v => {
			return v.list[v.selected].name
		})
		return getCheckedGoods.join(',')
	})
	const checkedGoodsIndex = computed(() => {
		if (detail.value.goodsSkus) {
			let index = detail.value.goodsSkus.findIndex(v => {
				return v.skustext == checkedGoods.value
			})
			console.log('index', index);
			return index;
		} else {
			return -1
		}
	})
	const checkedGoodsPrice = computed(() => {
		let index = checkedGoodsIndex.value
		if (index > -1) {
			return detail.value.goodsSkus[index].pprice
		} else {
			return 100
		}
	})
	//加入购物车
	const goCart = () => {
		let skus_type = detail.value.sku_type
		console.log('skus_type', skus_type);
		let shop_id = skus_type == 0 ? detail.value.id : detail.value.goodsSkus[checkedGoodsIndex.value].id
		console.log('shop_id', shop_id);
		let token = uni.getStorageSync('token') || ''
		if (token) {
			addCart(shop_id, skus_type, num.value).then(res => {
				console.log('res', res);
				if (res.msg == 'ok') {
					uni.showToast({
						title: '加入购物车成功'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/cart/cart'
						})
					}, 500)
					// uni.$emit('update')
				}
			})
		} else {
			$U.unLogin()
		}

	}
	const onClick = (index, e) => {
		console.log('eeee', index, e);
		if (e.index == 0) { //编辑
			uni.navigateTo({
				url: `/pages/address/address?key=${index}`
			})
		} else {
            store.delRuleForm(index)
		}
		//关闭所有左滑
		unaction.value.closeAll() 
	}
	
	
	const change = (event) => {
		console.log('改变事件', event);
	}
	//添加新地址
	const goAddress = () => {
		uni.navigateTo({
			url: `/pages/address/address`
		})
	}

    //禁止弹出层出现后页面滚动
	const disabledScroll = ()=>{
		return false
	}
	onLoad((e) => {
		console.log('e', e);
		id = e.key
	})
	const getdetail = () => {
		getDetail(id).then(res => {
			console.log('resdetail', res);
			detail.value = res.data
			goodsBanner.value = res.data.goodsBanner
			selects.value = res.data.goodsSkusCard.map(v => {
				var goodsCard = v.goodsSkusCardValue.map(item => {
					return {
						id: item.id,
						name: item.value
					}
				})
				return {
					selected: 0,
					title: v.name,
					list: goodsCard
				}
			})
			res.data.goodsSkus.map(v => {
				let arr = []
				for (let value in v.skus) {
					arr.push(v.skus[value].value)

					v.skustext = arr.join(',')
					console.log('arr', v.skustext);
				}
			})
		})
	}
	onMounted(() => {
		getdetail()
	})
</script>
<style scoped lang="scss">
	.pop {
		width: 750rpx;
		height: 300rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.popup {
		width: 100%;
		height: 300rpx;
		background-color: #eee;
	}

	.list {
		margin: 0 0 0 20rpx;
	}

	.pprice {
		font-size: 20rpx;
		color: #f60;
	}

	.pprice text {
		font-size: 34rpx;
		color: #f60;
		font-weight: 900;
	}

	.pop-height {
		height: 900rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.content image {
		width: 198rpx;
		height: 204rpx;
	}

	.uv-content {
		padding: 24rpx;
	}

	::v-deep ._root {
		line-height: 0;
	}

	.go-cart {
		width: 750rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #f70;
		color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.swiper-action {
		padding: 0 20rpx;
		height: 88rpx;
		line-height: 88rpx;
	}
</style>